<template>
	<div class="wrapper">
		<v-head @navChange="navChange"></v-head>
		<div :style="note">
			<v-sidebar :sideNav="sideNav"></v-sidebar>
			<div class="content-box" :class="{'content-collapse':collapse}">
				<!-- <v-tags></v-tags> -->
				<div class="content">
					<transition name="move" mode="out-in">
						<keep-alive>
							<router-view v-if="isRouterAlive"></router-view>
						</keep-alive>
					</transition>
				</div>
			</div>
			<!-- <div class="home_footer">
				<p>© 2020 远程写卡--管理控制台</p>
			</div> -->
		</div>
	</div>
</template>

<script>
import vHead from "@/views/frame/Header.vue";
import vSidebar from "@/views/frame/Sidebar.vue";

export default {
	data() {
		return {
			collapse: false,
			sideNav: -1,
			isRouterAlive: true
		};
	},
	computed:{
		note: function() {
			return{
				background: this.$store.state.visible.bgWhite? '#fff': 'url('+require('assets/image/home-bg.jpg')+') 100% 100% no-repeat',
				backgroundRepeat: "no-repeat",
				backgroundSize: "100% 100%",
				height: "100%",
				position: "relative",
				"overflow-y": "hidden"
			}
		}
	},
	provide() {
		return {
			reload: this.reload
		};
	},
	components: {
		vHead,
		vSidebar
	},
	created() {
		this.bus.$on("collapse", msg => {
			this.collapse = msg;
		});
		// this.$router.push({
		// 	path: "/dashboard",
		// 	params: {}
		// });
	},
	methods: {
		/**@augments id 一级菜单的id
		 * 一级菜单修改，联动改变二级菜单
		 */
		navChange(id) {
			let secNavId = sessionStorage.getItem("secNavId");
			if (secNavId) {
				this.sideNav = secNavId;
			} else {
				this.sideNav = id;
			}
		},
		reload() {
			this.isRouterAlive = false;
			this.$nextTick(function() {
				this.isRouterAlive = true;
			});
		}
	}
};
</script>